<template>
	<view class="box-bg">
		<uni-nav-bar shadow left-icon="left" @clickLeft="back" />

		<view class="login">

			<view class="login-main">
				<view class="main-card">
					<view class="main-text">
						<text>Login</text>
					</view>
					<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
						<uni-forms-item labelWidth="0px" name="username">
							<uni-easyinput v-model="valiFormData.username" placeholder="用户名" />
						</uni-forms-item>
						<uni-forms-item labelWidth="0px" name="password">
							<uni-easyinput type="password" v-model="valiFormData.password" placeholder="密码" />
						</uni-forms-item>

					</uni-forms>
					<button type="primary" @tap="submit('valiForm')">登录</button>

					<view class="card-register">
						<text class="lefttext" @tap="gochangepwd">忘记密码</text>
						<text class="righttext" @tap="goRegister">注册</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import axios from "axios";
	import Cookies from "js-cookie"

	export default {
		data() {
			return {
				// 校验表单数据
				valiFormData: {
					username: '',
					password: ''
				},
				// 校验规则
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}, {
							format: 'number',
							errorMessage: '只能输入数字'
						}]
					}
				},
			}
		},
		methods: {
			handleSexValue(e) {
				this.valiFormData.sex = e.detail.value;
			},

			submit(ref) {
				this.$refs[ref].validate()
					.then(res => {
						uni.showLoading({
							title: '正在登录....',
						})
					}).then(res => {
						axios.post('/api/login?username=' + this.valiFormData.username + '&password=' + this
								.valiFormData.password)
							.then(res => {
								if (res.data.code === 2000) {
									Cookies.set('username', res.data.username, {
										expires: 1
									});
									uni.switchTab({
										url: "/pages/my/my",
										success: () => {
											setTimeout(() => {
												this.$router.go(0)
											}, 500)
										}
									})

								} else {
									console.log(res.data);

									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									});

									this.valiFormData.username = ''
									this.valiFormData.password = ''
									// return false
								}
							}).catch(res => {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								});
							})
					})
					.catch(res => {
						console.log("失败");
					})
			},
			// denglu() {
			// 	axios.post('/api/login?username=' + this.valiFormData.username + '&password=' + this
			// 			.valiFormData.password)
			// 		.then(res => {
			// 			if (res.data.code === 2000) {
			// 				Cookies.set('username', res.data.username, {
			// 					expires: 1
			// 				});
			// 				uni.showLoading({
			// 					success() {
			// 						uni.switchTab({
			// 							url: "/pages/my/my",
			// 							success: () => {
			// 								setTimeout(() => {
			// 									this.$router.go(0)
			// 								}, 500)
			// 							}
			// 						})
			// 					}
			// 				})

			// 			} else {
			// 				console.log(res.data);

			// 				uni.showToast({
			// 					title: res.data.msg,
			// 					icon: 'none'
			// 				});

			// 				this.valiFormData.username = ''
			// 				this.valiFormData.password = ''
			// 				return false
			// 			}
			// 		}).catch(res => {
			// 			uni.showToast({
			// 				title: res.data.msg,
			// 				icon: 'none'
			// 			});
			// 		})
			// },
			gochangepwd() {
				uni.navigateTo({
					url: '/pages/my/changepwd'
				})
			},
			goRegister() {
				uni.navigateTo({
					url: '/pages/login/register'
				})
			},
			back() {
				uni.switchTab({
					url: '/pages/my/my'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.box-bg {
		width: 100%;
		height: calc(100% - 45px);
		position: absolute;
	}


	.login {
		width: 100%;
		height: 100%;
		padding: 10%;
		display: flex;
		background: url("@/static/img/wave-haikei.png") center;
	}

	.login-main {
		width: 100%;
		max-width: 400px;
		margin: auto;
		display: flex;
	}

	.main-card {
		width: 100%;
		height: 100%;
		border: 1px solid black;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		// margin: auto;
		background-color: white;
		padding: 20rpx;

		.main-text {
			text-align: center;
			font-size: 40rpx;
			font-weight: bold;
			color: #666666;
			line-height: 60rpx;
		}

		.inputtap {
			border-bottom: 1px solid #0099CC;
		}

		.card-register {
			text-align: right;
			margin-top: 40rpx;

			.lefttext,
			.righttext {
				margin: 0 10px;
			}
		}
	}

	.uni-easyinput__content-input {
		background-color: black;
	}

	button {
		width: 200rpx;
		height: 60rpx;
		text-align: center;
		line-height: 30px;
		font-size: 32rpx;
	}
</style>
